<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .color{
            background: red
        }
        .licolor{
            color:slateblue
        }
    </style>
</head>
<body>
    <div id="add">
        {{meg}}
        {{ num > 89 ? "ad" : "assd"}}
        <input type="text" placeholder="请输入证号" v-if="status==1">
        <input type="password" placeholder="请输入密码" v-if="status==1">

        <input type="text" placeholder="请输入手机号" v-if="status!=1">
        <br>


        <input type="text" placeholder="请输入电影名" v-model="movieName">
        <input type="text" placeholder="请输入价格" v-model="price">
        <button @click="add">添加</button>


        <ul>
            <li v-on:click="del(item.id)" :class="{'color':index%2!=0}" v-if="item.update==true" v-for="(item,index) in movie">{{item.name}}----{{item.price}} <button>删除</button></li>
        </ul>

        
        <ul>
            <li :class="['licolor',{'color':index%2===0}]" :style="{height:h+'px',width:w+'px'}" v-for="(item,index) in 10">
                {{index}}----{{item}}
            </li>
        </ul>
        <img :style="style" :src="urlsrc" alt="">
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#add',
        data:{
            movieName:"",
            price:0,
            meg:'hello zs',
            num:90,
            status:1,
            w:100,
            h:40,
            style:{height:'100px',width:'100px'},
            urlsrc:"https://cn.vuejs.org/images/logo.png",
            movie:[
                {
                    name:"七龙珠",
                    price:'1235',
                    update:true,
                    id:0
                },
                {
                    name:"龙珠 超",
                    price:'1235',
                    update:true,
                    id:1
                },
                {
                    name:"火影忍者",
                    price:'1235',
                    update:true,
                    id:2
                },
                {
                    name:"七龙珠",
                    price:'1235',
                    update:true,
                    id:3
                },
                {
                    name:"龙珠 超",
                    price:'1235',
                    update:true,
                    id:4
                },
                {
                    name:"火影忍者",
                    price:'1235',
                    update:true,
                    id:5
                }
            ]
        },
        methods:{
            del(id){
                let ind = this.movie.findIndex(item => item.id === id);
                this.movie.splice(ind,1)
            },
            add(){
                this.movie.push({
                    name:this.movieName,
                    price:this.price,
                    update:true,
                    id:9
                })
            }
        }
    })
</script>
</html>